<template>
  <div>
    <!-- 导航位置 -->
    <div>
      <van-nav-bar
        title="安全中心"
        @click-left="goMy()"
        left-text="返回"
        left-arrow
      >
      </van-nav-bar>
    </div>
    <!-- 内容位置 -->
    <div>
      <Bg>
        <div class="content">
          <!-- 表格位置 -->
          <div class="table">
            <van-cell-group>
              <van-cell title="修改密码" is-link @click="showPopup" />
              <van-cell title="注销账号" is-link @click="destroyAccount" />
            </van-cell-group>
            <!-- 按钮位置 -->
            <div class="btn">
              <van-button
                @click="logout()"
                type="primary"
                color="blue"
                block
                round
                >退出登录</van-button
              >
            </div>
          </div>
        </div>
      </Bg>
    </div>

    <!-- 修改密码弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      closeable
      :style="{ height: '40%' }"
    >
      <!-- 弹出层同步 -->
      <div class="alter">修改密码</div>
      <div>
        <!-- 修改密码表格位置 -->
        <van-cell-group>
          <van-field
            :type="isShow1 ? 'text' : 'password'"
            v-model="oldPasswork"
            label="旧密码"
            :right-icon="isShow1 ? 'eye-o' : 'closed-eye'"
            @click-right-icon="isShowPass1"
            placeholder="旧密码"
          />
          <van-field
            :type="isShow2 ? 'text' : 'password'"
            v-model="newPasswork"
            label="新密码"
            :right-icon="isShow2 ? 'eye-o' : 'closed-eye'"
            @click-right-icon="isShowPass2"
            placeholder="新密码"
          />
        </van-cell-group>
      </div>
      <div class="alterBtn">
        <van-button
          @click="updatePassword()"
          type="primary"
          color="blue"
          block
          round
          >提交</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import Bg from "../components/Bg";
export default {
  name: "SecurityCenter",
  components: {
    Bg,
  },
  data() {
    return {
      // 控制弹出层
      show: false,
      // 旧密码
      oldPasswork: "",
      // 新密码
      newPasswork: "",
      // 控制是否显示密码
      isShow1: false,
      isShow2: false,
    };
  },
  methods: {
    // 返回我的页面
    goMy() {
      this.$router.go(-1);
    },

    // 修改密码
    showPopup() {
      this.show = true;
    },

    //是否显示密码
    isShowPass1() {
      this.isShow1 = !this.isShow1;
    },
    isShowPass2() {
      this.isShow2 = !this.isShow2;
    },

    // 修改密码
    updatePassword() {
      // let tokenString = this.$cookies.get("TOKEN");
      let tokenString = localStorage.getItem("TOKEN");

      this.axios({
        method: "POST",
        url: "/updatePassword",
        data: {
          tokenString,
          password: this.newPasswork,
          oldPassword: this.oldPasswork,
        },
      })
        .then((res) => {
          // 清空输入框
          this.$toast(res.data.msg);

          //如果token失效 跳回重新登录
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }
          if (res.data.code === "E003") {
            this.oldPasswork = "";
            this.newPasswork = "";
            return;
          }

          if (res.data.code === "E001") {
            this.oldPasswork = "";
            this.newPasswork = "";
            this.show = false;
            setTimeout(() => {
              this.$router.push({ name: "Login" });
            }, 1000);
          }
        })
        .catch((err) => {});
    },

    // 退出登录
    logout() {
      // let tokenString = this.$cookies.get("TOKEN");
      let tokenString = localStorage.getItem("TOKEN");

      this.axios({
        method: "POST",
        url: "/logout",
        data: {
          tokenString,
        },
      })
        .then((res) => {
          if (res.data.code === 700) {
            this.$router.push({ name: "Login" });
            return;
          }

          this.$toast(res.data.msg);
          if (res.data.code === "F001") {
            localStorage.removeItem("TOKEN");
            this.$router.push({ name: "Login" });
          }
        })
        .catch((err) => {});
    },

    // 注销账号
    destroyAccount() {
      this.$dialog
        .confirm({
          title: "注销账号",
          message: "是否确定注销账号, 一旦注销无法恢复",
        })
        .then((res) => {
          // let tokenString = this.$cookies.get("TOKEN");
          let tokenString = localStorage.getItem("TOKEN");
          this.axios({
            method: "POST",
            url: "/destroyAccount",
            data: {
              tokenString,
            },
          })
            .then((res) => {
              this.$toast(res.data.msg);
              setTimeout(() => {
                this.$router.push({ name: "Login" });
              }, 1000);
            })
            .catch((err) => {});
        })
        .catch((err) => {});
    },
  },
};
</script>

<style lang="less" scoped>
// 表格位置样式
.table {
  width: 95%;
  margin: auto;
}
// 按钮样式
.btn {
  width: 95%;
  margin: 150px auto;
}
// 弹出层头部
.alter {
  font-size: 18px;
  margin: 10px;
  color: #666;
}
// 修改密码提交按钮
.alterBtn {
  margin: 30px 0;
}
</style>